<template>
    <div class="mod-config">
        <!--  头部：新增，批量删除    -->
        <div>
            <!--    新增按钮      -->
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addPermissionData">新增权限</el-button>
            <el-form :inline="true" style="float:right">
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary" circle @click="search"></el-button>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchName" placeholder="搜索权限名称，例如：注册用户" size="medium" class="input" clearable="clearable"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-divider></el-divider>
        <!--   主体：表格（基本信息，修改，删除）   -->
        <div class="table">
            <el-table :data="tableData" border style="width: 100%" v-loading="dataListLoading" >
                <el-table-column type="index" header-align="center" align="center" width="100" label="序号">
                    <template #default="scope">
                        <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="230" align="center"></el-table-column>
                <el-table-column prop="code" label="代码" width="230" align="center"></el-table-column>
                <el-table-column prop="createTime" label="创建日期" width="230" align="center"></el-table-column>
                <el-table-column prop="modifiedTime" label="修改日期" width="230" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button  size="small" icon="el-icon-edit" type="primary" @click="update(scope.row.id)">
                            修 改
                        </el-button>
                        <el-button size="small" icon="el-icon-turn-off" type="danger" @click="noNode(scope.row.id)">
                            禁 用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    align="left"
                    @current-change="changePage"
                    background
                    layout="total, prev, pager, next"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    :total="total">
            </el-pagination>
            <!--   弹窗-新增角色  -->
            <el-dialog title="新增权限" :visible.sync="editFormVisibleForPermissionDataData" :show-close="isClose" :close-on-click-modal="isClose" center>
                <el-divider><i class="el-icon-setting"></i></el-divider>
                <el-form :model="addPermissionForm" :rules="addPermissionFormRules"  label-width="0px" class="demo-ruleForm">
                    <el-form-item prop="name" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写权限名称" v-model="addPermissionForm.name">
                            <template slot="prepend"><i class="el-icon-edit"></i>名称</template>
                        </el-input>
                    </el-form-item>
                    <div style="height: 20px"></div>
                    <el-form-item prop="code" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写权限代码" v-model="addPermissionForm.code">
                            <template slot="prepend"><i class="el-icon-edit"></i>代码</template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editFormVisibleForPermissionDataData=false">取 消</el-button>
                    <el-button type="primary" @click="commitPermission">确 定</el-button>
                </div>
            </el-dialog>
            <!--   弹窗-修改角色  -->
            <el-dialog title="修改权限" :visible.sync="editFormVisibleForUpdatePermissionData" :show-close="isClose" :close-on-click-modal="isClose" center>
                <el-divider><i class="el-icon-setting"></i></el-divider>
                <el-form :model="updatePermissionForm" :rules="addPermissionFormRules"  label-width="0px" class="demo-ruleForm">
                    <el-form-item prop="name" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写权限名称" v-model="updatePermissionForm.name">
                            <template slot="prepend"><i class="el-icon-edit"></i>名称</template>
                        </el-input>
                    </el-form-item>
                    <div style="height: 20px"></div>
                    <el-form-item prop="code" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写权限代码" v-model="updatePermissionForm.code">
                            <template slot="prepend"><i class="el-icon-edit"></i>代码</template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editFormVisibleForUpdatePermissionData=false">取 消</el-button>
                    <el-button type="primary" @click="updatePermission">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import dayjs from "dayjs";

export default {
    data() {
        return {
            //是否为搜索状态
            isSearch:false,
            // 当前页
            currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
            // 一共多少页
            pageSize: 10,
            // 一共多少条
            total: 10,
            // 加载
            dataListLoading:false,
            //表格数据
            tableData:[],
            //搜索的字典名称
            searchName:'',
            // 是否主动关闭
            isClose:false,
            // 弹窗-新增角色
            editFormVisibleForPermissionDataData:false,
            // 弹窗-修改角色
            editFormVisibleForUpdatePermissionData:false,
            //新增权限表单
            addPermissionForm:{
                name:'',
                code:''
            },
            // 新增权限表单验证
            addPermissionFormRules:{
                name: [
                    { required: true, message: '权限名称', trigger: 'blur' },
                    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入权限代码', trigger: 'blur' },
                    { min: 2, max: 100, message: '长度在 2 到 100个字符', trigger: 'blur' }
                ]
            },
            //修改角色表单
            updatePermissionForm:{
                id:'',
                name:'',
                code:''
            }
        }
    },
    mounted() {
        this.isSearch = false;
        this.loadPermissionData()
    },
    methods: {
        dayjs,
        permissionInfo(e,message){
            if(e.name === '' || e.name === null){
                e.name = message;
            }
            if(e.code === '' || e.code === null){
                e.code = message;
            }
            if(e.createTime === '' || e.createTime === null){
                e.createTime = message;
            }else {
                e.createTime = dayjs(e.createTime).format('YYYY-MM-DD HH:mm:ss');
            }
            if(e.modifiedTime === '' || e.modifiedTime === null){
                e.modifiedTime = message;
            }else {
                e.modifiedTime = dayjs(e.modifiedTime).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        reSearch(){
            let that = this;
            this.currentPage=1;
            that.$http('/permission/search','POST',{
                name:that.searchName,
                pageNum: that.currentPage
            },(resp)=>{
                if (resp.data.code===20000){
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if (data.list.length>0){
                        let message = '暂无'
                        for (let e of that.tableData){
                            this.permissionInfo(e,message)
                        }
                        that.currentPage = resp.data.data.currentPage;
                        that.pageSize = resp.data.data.pageSize;
                        that.total = resp.data.data.total;
                    }
                }else {
                    that.$message({
                        type: 'info',
                        message: '未搜索到结果，请重试！'
                    });
                }
            });
        },
        search(){
            let that = this;
            this.isSearch = true;
            if (that.searchName === '') {
                that.$message({
                    type: 'error',
                    message: '请先填写需要搜索的名称'
                });
                this.isSearch = false;
            }
            that.$http('/permission/search','POST',{
                name:that.searchName,
                pageNum: that.currentPage
            },(resp)=>{
                if (resp.data.code===20000){
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if (data.list.length>0){
                        let message = '暂无'
                        for (let e of that.tableData){
                            this.permissionInfo(e,message)
                        }
                        that.currentPage = resp.data.data.currentPage;
                        that.pageSize = resp.data.data.pageSize;
                        that.total = resp.data.data.total;
                    }
                }else {
                    this.reSearch();
                }
            });
        },
        noNode(id){
            let that = this;
            that.$confirm('是否确认禁用该权限?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.$http('/permission/enable','PUT',{
                    id:id,
                    enable:false
                },(resp)=>{
                    if (resp.data.code===20000){
                        that.$message({
                            message: '禁用成功',
                            type: 'success'
                        });
                        that.loadPermissionData();
                    }else {
                        that.$message({
                            message: '禁用失败',
                            type: 'error'
                        });
                    }
                })
            }).catch(() => {})
        },
        updatePermission(){
            let that = this;
            that.$confirm('是否确认提交?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.$http('/permission/update/','PUT',that.updatePermissionForm,(resp)=>{
                    if (resp.data.code===20000){
                        that.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        that.editFormVisibleForUpdatePermissionData = false;
                        that.loadPermissionData();
                    }else {
                        that.$message({
                            message: '修改失败',
                            type: 'error'
                        });
                    }
                })
            }).catch(() => {})
        },
        update(id){
            let that = this;
            that.editFormVisibleForUpdatePermissionData = true;
            that.$http('/permission/info/','POST',{
                id:id
            },(resp)=>{
                if (resp.data.code===20000){
                    let data = resp.data.permission;
                    that.updatePermissionForm.id = data.id;
                    that.updatePermissionForm.name = data.name;
                    that.updatePermissionForm.code = data.code;
                    that.editFormVisibleForUpdatePermissionData = true;
                }else {
                    that.$message({
                        message: '获取数据失败',
                        type: 'error'
                    });
                }
            })
        },
        commitPermission(){
            let that = this;
            that.$confirm('是否确认提交?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.$http('/permission/add','POST',that.addPermissionForm,(resp)=>{
                    if (resp.data.code===20000){
                        that.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        that.editFormVisibleForPermissionDataData=false;
                        that.loadPermissionData()
                    }else {
                        that.$message({
                            message: '提交失败',
                            type: 'error'
                        });
                    }
                })
            }).catch(()=>{})
        },
        addPermissionData(){
            this.editFormVisibleForPermissionDataData=true;
        },
        // 加载数据
        loadPermissionData(){
            this.dataListLoading = true;
            let that = this;
            that.$http('/permission','POST',{
                pageNum:that.currentPage
            },(resp)=>{
                if (resp.data.code===20000){
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if(data.list.length<=0){
                        this.currentPage = 1;
                        this.loadData()
                    }else {
                        let message = '暂无'
                        for (let e of that.tableData){
                            if(e.name === '' || e.name === null){
                                e.name = message;
                            }
                            if(e.code === '' || e.code === null){
                                e.code = message;
                            }
                            if(e.createTime === '' || e.createTime === null){
                                e.createTime = message;
                            }else {
                                e.createTime = dayjs(e.createTime).format('YYYY-MM-DD HH:mm:ss');
                            }
                            if(e.modifiedTime === '' || e.modifiedTime === null){
                                e.modifiedTime = message;
                            }else {
                                e.modifiedTime = dayjs(e.modifiedTime).format('YYYY-MM-DD HH:mm:ss');
                            }
                        }
                        that.currentPage = resp.data.data.currentPage;
                        that.pageSize = resp.data.data.pageSize;
                        that.total = resp.data.data.total;
                        this.dataListLoading = false;
                    }
                }
            })
        },
        loadData(){
            let that = this;
            that.$http('/permission','POST',{
                page:that.currentPage
            },(resp)=>{
                if (resp.data.code===20000){
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if(data.list.length<=0){
                        this.currentPage = 1;
                    }else {
                        let message = '暂无'
                        for (let e of that.tableData){
                            this.permissionInfo(e,message);
                        }
                        that.currentPage = resp.data.data.currentPage;
                        that.pageSize = resp.data.data.pageSize;
                        that.total = resp.data.data.total;
                    }
                    this.dataListLoading = false;
                }
            })
        },
        // 切换分页
        changePage(page) {
            this.currentPage = page;
            if(this.isSearch){
                this.search();
            }else{
                this.loadPermissionData();
            }
        }
    }
}
</script>
<style lang="less">
.table {
  margin-top: 20px;
}
</style>